<template style="display:flex;justify-content: center;">
    <div class="poster">
        <img src="../assets/poster.jpg" alt="加载失败" class="poster-image">
        <div
            style="display: flex;align-items: end;min-width: 30%; position: absolute;right: 2%;bottom: 3%; min-height: 20%;flex-wrap: wrap;justify-content:flex-end;">
            <el-button plain class="exit-button" @click="exitAccount">退出账号</el-button>
            <el-button class="normal-button" @click="toPostMessage">参加活动</el-button>
            <el-button class="normal-button" @click="toMyMessage">我的精选留言</el-button>
            <el-button v-if ="role == 2" class="normal-button" @click="toJudgePost">审核留言</el-button>
        </div>
    </div>
    <div>
        <div v-loading="loading">
            <h2 :style="{ 'margin-left': '8%' }">精选留言</h2>
            <div style="width: 100%">
                <div style="width: 100%" v-if="isMessage">
                    <div class="posts">
                        <div class="post" v-for="(post, i) in posts" :key="i">
                            <div class="post-header">
                                <img class="post-avatar" :src="post.avatar" alt="头像" />
                                <div>
                                    <div class="post-username">{{ post.nickname }}</div>
                                    <div v-if="post.processedTime" class="post-time">于{{ post.processedTime }}发布</div>
                                </div>
                            </div>
                            <div class="post-body">
                                <p>{{ post.content }}</p>
                                <div @click="scaleImage(post.image)" class="post-image" v-if="post.image">
                                    <img :src="post.image" alt="图片" class="selectImg" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: center;">
                    <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="4"
                    :page-count="pageCount"
                    layout="prev,pager,next">
                    </el-pagination>
                    </div>
                </div>
                <div v-else style="display: flex;justify-content: center;">暂时没有精选留言</div>
            </div>
        </div>
    </div>
    <div v-if="isImageVisible" class="image-modal" v-on:click="hideImage">
            <img v-bind:src="messageImageUrl" class="modal-image">
        </div>
</template>
<script setup>
import router from '@/router';
import { ref,onBeforeMount } from 'vue';

import { onMounted } from 'vue';
import axios from "axios";
import { ElMessage } from 'element-plus';



const isMessage = ref(false)
const currentPage = ref(1);
const pageCount = ref(20);
const posts = ref([]);
const isImageVisible = ref(false);
const messageImageUrl = ref('');
const role = ref(localStorage.getItem("role"))
const loading = ref(true)

onBeforeMount(() => {
    console.log(localStorage.getItem("Authorization"))
    // while(localStorage.getItem("Authorization") === null) {
    //     console.log(localStorage.getItem("Authorization"))
    // }
    axios({
        method:"post",
        url:"/post/allSelected",
        data:{
            page:currentPage.value
        },
        headers:{
            'Content-Type':'application/x-www-form-urlencoded'
        }
    })
    .then(function(response) {
        if(response.data.status) {
            posts.value = response.data.data.postsList;
            pageCount.value = response.data.data.totalPageNum
            isMessage.value = true
            console.log(response.data)
            posts.value.forEach(element => {
                element.processedTime = getTime(element.time);
            });
        } else {
            ElMessage.error("加载错误")
        }
        loading.value = false;
    })
    //获取role
    axios({
    method:'get',
    url:'/user/me',  
})
.then(function(response) {
    if(response.data.status) {
    localStorage.setItem("role",response.data.data.role)
    role.value = localStorage.getItem("role")
    } else {
        ElMessage.error("加载用户信息失败")
    }
})
}) 

function scaleImage(imageSrc) {
    messageImageUrl.value = imageSrc
    isImageVisible.value = true
}

function hideImage() {
    isImageVisible.value = false
}

function exitAccount() {
    router.push("/");
    localStorage.removeItem("Authorization")
    console.log(localStorage.getItem("Authorization"));
}

function toPostMessage() {
    router.push("/PostMessage");
}
function toMyMessage() {
    router.push("/MyMessage");
}

function toJudgePost() {
    // const role = localStorage.getItem("role")
    role.value = 2;
    if(role.value === 1) {
        ElMessage.error('你无法进入审核,权限不够')
    }else if(role.value === 2){
        router.push("/JudgePost");
    }
}

const handleCurrentChange = (val) => {
    loading.value = true;
    currentPage.value = val;
    axios({
    method:"post",
    url:"/post/allSelected",
    data:{
        page:currentPage.value
    },
    headers:{
      'Content-Type':'application/x-www-form-urlencoded'
    }
  })
    .then(function(response) {
        if(response.data.status) {
            posts.value = response.data.data.postsList;
            pageCount.value = response.data.data.totalPageNum
            isMessage.value = true
            document.documentElement.scrollTop = 0;
            posts.value.forEach(element => {
                element.processedTime = getTime(element.time);
            });
        } else {
            isMessage.value = false
            ElMessage.error("加载错误")
        }
        loading.value = false;
    })
}

const getTime = (dateString)=>{
    const time = new Date(dateString*1000);
    const timeString = time.getFullYear()+"年"+ (time.getMonth()+1)+"月" + time.getDate() + "日";
    return timeString;
}
</script>
<style scoped>

.selectImg{
    width: 100%;
    height: 100%;
    object-fit: cover
}
.poster {
    justify-content: center;
    background-color: #85000b;
    max-height: 40%;
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
}

.poster-image {
    object-fit: contain;
    max-width: 100%;
}

.exit-button {
    margin: 0 1vw;
    font-size: min(20px,3vw);
    color: white;
    background-color: #85000b;
}
.normal-button{
    margin: 0 1vw;    
    font-size: min(20px,3vw);
    margin-top: 8px;
}

.posts {
    width: 100%;
    align-self: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.post {
    flex-grow: 1;
    min-width: 300px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 10px;
    border-radius: 12px;
    background-color: white;
    margin-bottom: 10px;
    box-shadow: 2px 2px 4px #0001;
}

.post>p {
    padding-left: 40px;
}

.post-header {
    padding: 5px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.post-body {
    padding: 5px;
}

.post-avatar {
    width: 100%;
    object-fit: cover;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    margin-right: 10px;
}

.post-username {
    color: black;
}

.post-time {
    color: #888;
}

.post-image {
    width: auto;
    height: auto;
    overflow: hidden;
}
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-image {
    object-fit: contain;
    min-height: 60%;
    max-width: 80%;
    max-height: 80%;
}
::v-deep .el-pager li.is-active{
  color: #85000b !important;
}
</style>